<template>
	<view class="outer-container">
		<view class="cardstyle" :style="{'background-color':bgColor}">
			<!-- newstype=1：无图片，仅标题 -->
			<view v-if="mode === 1" class="title-container single-title">
				<text class="title-text">{{title}}</text>
			</view>
			
			<!-- newstype=2：标题+单张图片（横向排列） -->
			<view v-else-if="mode === 2" class="title-container">
				<view class="imgbox" v-if="image">
					<image :src="image" style="width: 120rpx; height: 100rpx;" @error="handlerImageError"></image>
				</view>
				<text class="title-text">{{title}}</text>
			</view>
			
			<!-- newstype=3：标题在上，三张广告图在下（纵向排列） -->
			<view v-else-if="mode === 3" class="title-container vertical-layout">
					<text class="title-text" :class="isAd ? 'ad-title-color' : ''">{{title}}</text>
					<view class="imgbox ad-image-group" v-if="isAd && imageGroup && imageGroup.length">
						<image v-for="(img, idx) in imageGroup" :key="idx" :src="img"
							style="flex: 1; aspect-ratio: 4/3; object-fit: cover; max-height: 150rpx;" 
							@error="handlerImageError"></image>
					</view>
				</view>

			<!-- 作者、时间等信息 -->
			<view class="tipsbox">
				<view>
					<text v-if="isTop" style="color: #f00;">置顶</text>
					<text v-if="isAd" style="margin-left: 10rpx; color: blue;">广告</text>
					<text style="margin-left: 10rpx; color: darkgray;">{{author}}</text>
					<text style="margin-left: 10rpx; color: darkgray;" v-if="comments">{{comments}}评</text>
				</view>
				<view class="time-box">
					<text style="color:aqua">{{time}}</text>
				</view>
			</view>
			
			<slot name="footer"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cardViewText",
		data() {
			return {
				defaultImage: "/static/image-error.png",
				imageError: false // 新增图片错误标识
			};
		},
		methods: {
			handlerImageError() {
				this.imageError = true; // 图片加载失败时标记
			}
		},
		props: {
			isAd: {
				type: Boolean,
				default: false
			},
			imageGroup: {
				type: Array,
				default: () => []
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			title: {
				type: String,
				default: "新闻标题",
				required: true
			},
			isTop: {
				type: Boolean,
				default: false,
				required: true
			},
			author: {
				type: String,
				default: "来源",
				required: true
			},
			image: {
				type: String,
				default: "" // newstype=1无需图片，设为可选
			},
			comments: {
				type: [String, Number], // 兼容字符串/数字类型
				default: 0
			},
			time: {
				type: String,
				default: "2025.1.1"
			},
			mode: {
				type: Number,
				default: 1,
				required: true 
			}
		}
	}
</script>

<style>
	.cardstyle {
		padding: 10rpx;
		border-radius: 15rpx;
		margin-bottom: 10rpx;
	}
	.title-container {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.single-title {
		align-items: flex-start; 
	}
	.vertical-layout {
		flex-direction: column; 
	}
	.title-text {
		font-size: 32rpx;
		flex: 1; 
	}
	.imgbox {
		display: flex;
	}
	.ad-image-group {
			margin-top: 6rpx; /* 标题与图片间距缩小（原10rpx） */
			gap: 6rpx; /* 图片间间距缩小（原8rpx） */
			width: 100%;
		}
	.tipsbox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
	}
	.time-box {
		color: aqua;
	}
	.ad-title-color {
			color: #ccc;
			font-weight: 600;
		}
</style>